<template>
    <div class="logIn">
        <div class="orientation">
            <div class="head">
                <p><img src="../../assets/images/login/backWrite.png"></p>
                <span>注册</span>
                <p></p>
            </div>
        </div>
        <div class="box"> 
            <div class="main">
                <div class="password">
        <div class="verify">
            <p class="bor_box">
                <img src="../../assets/images/login/per.png">
                <van-field 
                    v-model="email" 
                    placeholder="请输入邮箱账号" 
                />
            </p>
            <p class="verification bor_box">
                <img src="../../assets/images/login/passw.png">
                <van-field
                    v-model="password"
                    :type="type"
                    placeholder="请输入密码"
                />
                <img v-if="isOpen" src="../../assets/images/login/eyeOpen.png" @click="ChangeEye">
                <img v-if="!isOpen" src="../../assets/images/login/eyeClose.png" @click="ChangeEye">
            </p>
            <p class="verification bor_box">
                <img src="../../assets/images/login/passw.png">
                <van-field
                    v-model="passwordres"
                    :type="typeres"
                    placeholder="请输入确认密码"
                />
                <img v-if="isOpenRes" src="../../assets/images/login/eyeOpen.png" @click="ChangeEyeRes">
                <img v-if="!isOpenRes" src="../../assets/images/login/eyeClose.png" @click="ChangeEyeRes">
            </p>
        </div>
        <p class="register">已有账号请 <span @click="login">立即登录</span></p>
        <p class="btn" @click="immediately">注册</p>
    </div>
            </div>
        </div>
    
    </div>
</template>

<script>
import { register } from "../../api/user.js";
export default {
    name:'logIn',
    data(){
        return{
            email:"",
            password:"",
            passwordres:"",
            isOpen:false,
            isOpenRes:false,
            type:"password",
            typeres:"password"
        }
    },
     methods:{
        ChangeEye(){
            this.isOpen = !this.isOpen
            if(this.isOpen){
                this.type = "text"
            }else{
                this.type = "password"
            }
        },
        ChangeEyeRes(){
            this.isOpenRes = !this.isOpenRes
            if(this.isOpenRes){
                this.typeres = "text"
            }else{
                this.typeres = "password"
            }
        },
        login(){
            this.$router.push({ name: "login" });
        },
        immediately(){
            if(this.email==""){
                this.$toast('请输入邮箱');
                return
            };
            var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
            if(!reg.test(this.email)){
                this.$toast('邮箱格式不正确');
                return
            }
            if(this.password==""){
                this.$toast('请输入密码');
                return
            };
            if(this.passwordres==""){
                this.$toast('请输入确认密码');
                return
            };
             if(this.passwordres!=this.password){
                this.$toast('两次密码不一致');
                return
            };
            register({
                "loginNo": this.email,
                "pass1": this.password,
                "pass2": this.passwordres,
            }).then(response=>{
                if(response.retCode=="200"){
                    // let obj = {
                    //     token:response.data,
                    //     user:this.email
                    // }
                    // localStorage.setItem("userInfo",JSON.stringify(obj));
                    // this.$router.push({ name: "" });
                }else{
                    this.$toast(response.retMsg);
                }
                
            });
        }
    }
}
</script>

<style scoped lang="less">
    .head{
        height: .44rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #fff;
        font-size: .16rem;
        padding: 0 .10rem;
        img{
            width: .24rem;
            height: .24rem;
        }
    }
    .orientation{
        height: 1.6rem;
        background: url("../../assets/images/login/login_bag.png") no-repeat;
        background-size: 100% 100%;
    }
.logIn-loading {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  z-index: 99999999;
}
img {
  display: block;
  width: 100%;
}
.main {
  padding: 0.4rem 0.2rem 0 0.2rem;
  font-size: 0.2rem;
  .hint {
    font-size: 0.3rem;
    color: #d8d8d8;
    text-align: center;
    margin-top: 1rem;
  }
  .topLogo {
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 auto;
  }
}
.van-cell{
    width: 80%;
}
.verify {
  padding: 0 .2rem;
  img{
    width: .22rem;
    height: .22rem;
    margin-right:.1rem;
  }
  .bor_box{
    border: 1px solid #ededed;
    display: flex;
    justify-content: flex-start;
    border-radius: .45rem;
    align-items: center;
    padding-left: .2rem;
  }
  .verification {
    position: relative;
    margin-top: 0.2rem;
    span {
      position: absolute;
      top: (5/75) + rem;
      right: -(10/75) + rem;
      display: block;
      width: 3rem;
      font-size: 0.35rem;
      color: #F83106 ;
      line-height: 1.2rem;
      text-align: center;
    }
  }
}
.register{
    font-size: .14rem;
    color: #afadad;
    text-align: right;
    padding: .2rem .2rem 0 0;
    span{
        color: #F83106;
        text-decoration: underline;
    }
}
.btn {
  line-height: .45rem;
  background: #F83106;
  font-size: 0.16rem;
  color: #fff;
  text-align: center;
  margin-top: 0.5rem;
  border-radius: .3rem;
}
</style>
